﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width" name="viewport">
    <title>社区商城</title>
    <link rel="stylesheet" type="text/css" href="css/weui.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css" />
    <style>
        .index_image {
            background: #fff;
            min-height: 90px;
            overflow-y: hidden;
            text-align: center;
        }
        .index_image img {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            display: block;
            background-image: url('https://img30.360buyimg.com/mobilecms/jfs/t1951/49/1526652906/3778/e2fe4d0c/56bbf7eaN94f6d38e.png');
            background-size: 100%;
        }
        .index_image a {
            display: inline-block;
            vertical-align: top;
            font-size: 12px;
            line-height: 20px;
            color: #333;
        }
        .swiper-container {
            width: 100%;
        }
        .weui-col-50 a {
            display: block;
            height: 100%;
            position: relative;
            padding-right: 10px;
            line-height: 24px;
            text-align: left;
     
        }
        .weui-col-50 a div img{
            width: 60px;
            height: 60px;
            margin-top: 5px;
        }
        .weui-col-50 a div span{
            display: block;
            font-size: 12px;
            height: 22px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 10px;
        }
        .weui-col-50 a div em {
            display: block;
            color: #39ac69;
            font-size: 15px;
            padding-top: 21px;
            padding-left: 10px;
            line-height: 15px;
            height: 15px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .weui-col-50 span {
            color: #999;
        }
    </style>
</head>
<body>
<div class="weui_tab">
    <div class="weui_search_bar" id="search_bar">
        <form class="weui_search_outer">
            <div class="weui_search_inner">
                <i class="weui_icon_search"></i>
                <input type="search" class="weui_search_input" id="search_input" placeholder="搜索" required/>
                <a href="javascript:" class="weui_icon_clear" id="search_clear"></a>
            </div>
            <label for="search_input" class="weui_search_text" id="search_text">
                <i class="weui_icon_search"></i>
                <span>搜索</span>
            </label>
        </form>
        <a href="javascript:" class="weui_search_cancel" id="search_cancel">取消</a>
    </div>
    <div class="weui_tab_bd">
        <div class="swiper-container" data-space-between='10' >
            <div class="swiper-wrapper" >
                <div class="swiper-slide" ><img style="width:100%" src="images/1.jpg" alt=""></div>
                <div class="swiper-slide" ><img style="width:100%" src="images/2.jpg" alt=""></div>
                <div class="swiper-slide"><img style="width:100%" src="images/3.jpg" alt=""></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="weui-row">
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t1951/49/1526652906/3778/e2fe4d0c/56bbf7eaN94f6d38e.png">超市</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t1951/49/1526652906/3778/e2fe4d0c/56bbf7eaN94f6d38e.png">超市</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t1951/49/1526652906/3778/e2fe4d0c/56bbf7eaN94f6d38e.png">超市</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t1951/49/1526652906/3778/e2fe4d0c/56bbf7eaN94f6d38e.png">超市</a></div></div>
        </div>

        <div class="weui-row">
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t1951/49/1526652906/3778/e2fe4d0c/56bbf7eaN94f6d38e.png">超市</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t2086/295/2173920743/10014/85b3a7ac/56bbf7f7N99dfa824.jpg">生鲜</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t2068/260/2270432834/3558/e232f836/56bbf806Nfc74399a.png">美食</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t2122/145/2240662998/8952/c1de3517/56bbf815N35c25b53.jpg">外卖</a></div></div>
        </div>
        <div class="weui-row">
            <div class="weui-col-50" style="background-color: #eee">
                <a href="#">
                    <div style="float: left"> <em style="color:#f2850f">热卖商家</em><span>优惠大集合</span></div>
                    <div style="float: right"><img src="https://img30.360buyimg.com/mobilecms/jfs/t2488/338/1850102733/8705/58e51aa8/56dce5d5N069b9848.png" /></div>
                </a>
            </div>
            <div class="weui-col-50" style="background-color: #eee">
                <a href="#">
                    <div style="float: left"> <em style="color:#f2850f">热卖商家</em><span>优惠大集合</span></div>
                    <div style="float: right"><img src="https://img30.360buyimg.com/mobilecms/jfs/t2488/338/1850102733/8705/58e51aa8/56dce5d5N069b9848.png" /></div>
                </a>
            </div>
        </div>
        <div class="weui-row" style="margin-top: 3px;">
            <div class="weui-col-50" style="background-color: #eee">
                <a href="#">
                    <div style="float: left"> <em style="color:#f2850f">热卖商家</em><span>优惠大集合</span></div>
                    <div style="float: right"><img src="https://img30.360buyimg.com/mobilecms/jfs/t2488/338/1850102733/8705/58e51aa8/56dce5d5N069b9848.png" /></div>
                </a>
            </div>
            <div class="weui-col-50" style="background-color: #eee">
                <a href="#">
                    <div style="float: left"> <em style="color:#f2850f">热卖商家</em><span>优惠大集合</span></div>
                    <div style="float: right"><img src="https://img30.360buyimg.com/mobilecms/jfs/t2488/338/1850102733/8705/58e51aa8/56dce5d5N069b9848.png" /></div>
                </a>
            </div>
        </div>
        <div id="list" class='demos-content-padded'></div>
        <div class="weui-infinite-scroll"></div>
    </div>
    <div class="weui_tabbar">
        <a href="index.html" class="weui_tabbar_item weui_bar_item_on">
            <div class="weui_tabbar_icon">
                <img src="./images/iconfont-home.png" alt="">
            </div>
            <p class="weui_tabbar_label">首页</p>
        </a>
        <a href="cart.html" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="./images/iconfont-cart.png" alt="">
            </div>
            <p class="weui_tabbar_label">购物车</p>
        </a>
        <a href="faxian.html" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="./images/iconfont-faxian.png" alt="">
            </div>
            <p class="weui_tabbar_label">发现</p>
        </a>
        <a href="wo.html" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="./images/iconfont-wo.png" alt="">
            </div>
            <p class="weui_tabbar_label">我</p>
        </a>
    </div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/jquery-weui.js"></script>
<script src="js/swiper.js"></script>
<script>
    var loading = false;  //状态标记
    $(document.body).infinite().on("infinite", function() {
        if(loading) return;
        loading = true;
        setTimeout(function() {
            $("#list").append("<p> 我是新加载的内容 </p>");
            loading = false;
        }, 800);   //模拟延迟
    });
    $(".swiper-container").swiper({
        loop: true,
        autoplay: 3000,
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
</script>
</body>
</html>